let customerListModule = (function () {
    let $selectBox = $('.selectBox'),
        $searchInp = $('.searchInp'),
        $tableBox = $('.tableBox'),
        $pageBox = $('pageBox'),
        $tbody = $('tbody');
    let lx = 'my',
        limit = 10,
        page = 1,
        total = 0,
        totalPage = 1;

    async function bindHTML() {
        let result = await axios.get('/customer/list', {
            params: {
                lx,
                type: $selectBox.val(),
                search: $searchInp.val().trim(),
                limit,
                page
            }
        });
        $tbody.html(''); $pageBox.html('');
        if (result.code != 0) { $tbody.html(''); $pageBox.html(''); return };
        // 存储总数和总页数
        total = parseInt(result.total);
        totalPage = parseInt(result.totalPage);

        // 绑定表格的数据
        result = result.data;
        let str = '';
        result.forEach(item => {
            let {
                id,
                name,
                sex,
                email,
                phone,
                QQ,
                weixin, type, address, userName
            } = item;
            str += `<tr>
            <td class="w8">${name}</td>
            <td class="w5">${sex}</td>
            <td class="w10">${email}</td>
            <td class="w10">${phone}</td>
            <td class="w10">${weixin}</td>
            <td class="w10">${QQ}</td>
            <td class="w5">${type}</td>
            <td class="w8">${userName}</td>
            <td class="w20">${address}</td>
            <td class="w14" customerId="${id}">
                <a href="javascript:;">编辑</a>
                <a href="javascript:;">删除</a>
                <a href="javascript:;">回访记录</a>
            </td>
        </tr>`
        });
        $tbody.html(str);

        // 分页的数据绑定
        if (totalPage > 1) {
            str = ``;
            page > 1 ? str += `<a href="javascript:;">上一页</a>` : null;
            str += `<ul class="pageNum">`;
            for (let i = 0; i < totalPage; i++) {
                str += `<li class="${i == page ? 'acitve' : ''}">${i}</li>`;
            }
            str += `</ul>`;
            page < totalPage ? str += `<a href="javascript:;">下一页</a>` : null;
            $pageBox.html(str);
        }
    }

    // 操作处理
    function handle() {
        $selectBox.change(bindHTML);
        $searchInp.keydown(ev => {
            if (ev.keycode === 13) {
                bindHTML();
            }
        });

        $pageBox.click(ev => {
            let target = ev.target,
                TAG = target.tagName,
                TEXT = target.text,
                temp = page;
            if(TAG==='A'){
                if(TEXT==='上一页'){
                    temp--;
                }
                if(TEXT==='下一页'){
                    temp++;
                }
            }
            if(TAG==='LI'){
                temp = parseInt(TEXT);
            }
            if(temp!==page){
                page = temp;
                bindHTML();
            }
        })
    }
    return {
        init() {
            // 获取传递进来的类型
            let params = window.location.href.queryURLParams();
            params.lx ? lx = params.lx : null;

            bindHTML();
            handle();

        }
    }
})();
customerListModule.init();